<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ words.order.title.value }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="my_pinzhenglist_center">
				<view class="index_swiper">
					<!--Tab布局-->
					<view class="index_title">
						<block v-for="(item, index) in malllist" :key="index">
							<view :data-id="index" :data-type="item.type" :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
								<view class="mall_t1">{{ item.name }}</view>
							</view>
						</block>
						<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'"><view class="mys_xians"></view></view>
					</view>
					<!--内容布局-->
					<view class="index_list">
						<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex" :style="'height:' + height + ';'">
							<block v-for="(item, index) in malllist" :key="index">
								<swiper-item>
									<view :class="'index_list_heji' + index">
										<view class="my_fanyongdingdan_list">
											<view class="my_fanyongdingdan_cont" v-for="(items, index) in list" :key="index">
												<view class="my_fanyongdingdan_cont_title">
													<view class="my_fanyongdingdan_cont_title_l">
														<image :src="imgUrl + '/dzx_img161.png'"></image>
														<text>{{ $t("page_my_fanyongdingdan.Order_time") }} : {{ items.create_time }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_title_r">{{ $t('page_my_fanyongdingdan.Account_received') }}</view>
												</view>
												<view class="my_fanyongdingdan_cont_list">
													<view class="my_fanyongdingdan_cont_cont">
														{{ $t('page_my_fanyongdingdan.Sending_route') }}
														<text>{{ items['line_name'] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ $t('page_my_fanyongdingdan.chargeable_weight') }}
														<text>{{ items['inpack']['cale_weight'] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ $t('page_my_fanyongdingdan.order_number') }}
														<text>{{ items['inpack']['order_sn'] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ $t('page_my_fanyongdingdan.Order_amount') }}
														<text>{{ price_mode.unit }}{{ items['order_price'] }}{{ price_mode.unit }}</text>
													</view>
												</view>
												<view class="my_fanyongdingdan_cont_bottom">
													<image :src="imgUrl + '/dzx_img162.png'"></image>
													<view class="my_fanyongdingdan_cont_b1">
														{{ $t('page_my_fanyongdingdan.income') }}
														<text>{{ price_mode.unit }}{{ items['money'] }}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
const app = getApp();
let request = require('../../../utils/require');
export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			price_mode: uni.getStorageSync('price_mode'),
			malllist: [
				{
					id: 0,
					name: '全部订单',
					index: 0
				},
				{
					id: 1,
					name: '已到账',
					index: 1
				},
				{
					id: 2,
					name: '无效订单',
					index: 2
				}
			],
			height: 0,
			heights: 0,
			currentIndex: 0,
			left: 16,
			false: false,
			width: 0,
			list: [],
			words: []
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad() {
		var that = this;
		that.changeline();
		that.getDealerList();
	},
	onShow() {
		var that = this;
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		//swiper切换时会调用
		pagechange: function(e) {
			var that = this;
			console.log(e, 88888);
			that.list = []
			that.currentIndex = e.detail.current
			that.changeline(e);
			that.getDealerList(e);
		},

		//swiper单击事件
		getcurrentid(e) {
			this.list = []
			this.currentIndex = e.currentTarget.dataset.id
			this.getDealerList();
		},

		//下标线左右滑动效果
		changeline: function(e) {
			const query = uni.createSelectorQuery();
			var that = this;
			query.select('.mall_on').boundingClientRect();
			query.exec(function(res) {
				console.log(res, '????');
				if (res[0] != null) {
					that.left = res[0].left
					that.width = res[0].width
				} else {
					that.left = 0
				}
			});
		},
		getDealerList() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				settled: this.currentIndex
			};
			request.get(`index.php?s=/api/user.dealer.order/lists&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					this.list = res.data.data.list.data
					this.words =  res.data.data.words
					console.log(that.words, 6666);
					setTimeout(() => {
						that.swiperhegiht(that.currentIndex);
					}, 300);
				}
			});
		},
		//swiper选项卡的高度
		swiperhegiht(es) {
			var that = this;
			var query = uni.createSelectorQuery();
			console.log(es, 9999);
			query.selectAll('.index_list_heji' + es).boundingClientRect();
			query.exec(res => {
				var listHeight = res[0][0].height;
				that.height = listHeight + 'px'
				that.heights = res[0]
				console.log(that.height, 55555);
			});
		},
		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_fanyongdingdan.css';
</style>
